<template>
	<el-scrollbar height="100vh">
	<div>
		<div class="btns">
		  <el-button type="primary" plain :icon="Clue" @click="add">添加线索</el-button>
		  <el-button type="warning" plain :icon="ClearFilter" @click="clearFilter">清除筛选</el-button>
		</div>
		<el-table ref="tableRef" :data="tableData.records">
			<el-table-column type="expand">
				<template #default="scope">
					<el-form label-width="100" inline>
						<el-form-item label="干部编号">{{scope.row.ccId}}</el-form-item>
						<el-form-item label="省">{{scope.row.province}}</el-form-item>
						<el-form-item label="市">{{scope.row.city}}</el-form-item>
						<el-form-item label="县">{{scope.row.county}}</el-form-item>
						<el-form-item label="乡">{{scope.row.township}}</el-form-item>
						<el-form-item label="村">{{scope.row.village}}</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="家庭编号" prop="fid"></el-table-column>
			
			<el-table-column label="人力风险" prop="riskMan"
			:filters="[
				{ text: '有',value: true },
				{ text: '无',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
					<span v-if="scope.row.riskMan">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="物质风险" prop="riskSubstance"
			:filters="[
				{ text: '有',value: true },
				{ text: '无',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
					<span v-if="scope.row.riskSubstance">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="自然风险" prop="riskNature"
			:filters="[
				{ text: '有',value: true },
				{ text: '无',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
					<span v-if="scope.row.riskNature">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="金融风险" prop="riskFinance"
			:filters="[
				{ text: '有',value: true },
				{ text: '无',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
					<span v-if="scope.row.riskFinance">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="社会风险" prop="riskSocial"
			:filters="[
				{ text: '有',value: true },
				{ text: '无',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
					<span v-if="scope.row.riskSocial">是</span>
					<span v-else>否</span>
				</template>
			</el-table-column>
			<el-table-column label="风险级别" prop="riskLevel" 
			:filters="[
				{ text: '一级',value: 1 },
				{ text: '二级',value: 2 },
				{ text: '三级',value: 3 },
				{ text: '四级',value: 4 },
				{ text: '五级',value: 5 },
			]"
			:filter-method="filterHandler"
			></el-table-column>
			<el-table-column label="风险备注" prop="riskRemark" show-overflow-tooltip></el-table-column>
			<el-table-column label="是否核实" prop="verify"
			:filters="[
				{ text: '已核实',value: true },
				{ text: '未核实',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
                    <el-tag type="success" v-if="scope.row.verify">已核实</el-tag>
					<el-tag type="info" v-else>未核实</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态" prop="valid"
			:filters="[
				{ text: '有效',value: true },
				{ text: '失效',value: false }
			]"
			:filter-method="filterHandler"
			>
				<template #default="scope">
					<el-tag type="success" v-if="scope.row.valid">有效</el-tag>
					<el-tag type="danger" v-else>失效</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="240" label="操作">
				<template #default="scope">
					<template v-if="scope.row.valid">
						<el-button type="primary" plain size="small" :icon="Update"  @click="update(scope.row.id)">修改</el-button>
						<el-button type="danger" plain size="small" :icon="Del" @click="del(scope.row.id, 0)">删除</el-button>
						<el-button type="primary" plain size="small" :icon="Assign" @click="adminList(scope.row.id)">分配</el-button>
					</template>
					<el-button v-else type="warning" plain size="small" @click="del(scope.row.id, 1)">启用</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
				style="margin-top: 10px;"
				background
				v-model:current-page="params.pageNo"
				:page-count="tableData.pages"
				:total="tableData.total"
				@current-change="getTableData"
				 :hide-on-single-page="true"/>
		<el-dialog
				v-model="dialog.show"
				:title="dialog.title"
				width="450px"
				:close-on-click-modal="false">
		  <Add
			v-if="dialog.show"
			@getTableData="getTableData"
			v-model:show="dialog.show"
			:id="dialog.id"/>
		</el-dialog>
		<el-dialog
		v-model="assignDialog.show"
		width="700px"
		title="线索分配"
		:close-on-click-modal="false">
		<AssignComponent
		 v-if="assignDialog.show"
		 v-model:show="assignDialog.show"
		 :clueId="assignDialog.clueId"/>
		</el-dialog>
	</div>
	</el-scrollbar>
</template>

<script setup>
	import { getPath } from '@/util'
	import Clue from '@/components/icons/IconClue'
	import { get, post } from '@/axios'
	import { ref, reactive } from 'vue'
	import Add from './add'
	import { ElMessageBox } from 'element-plus'
	import AssignComponent from './assign'
	import url from './util'
	import Update from '@/components/icons/update'
	import Del from '@/components/icons/del'
	import Assign from '@/components/icons/assign'
	import ClearFilter from '@/components/icons/clearFilter'
	import { userIdStore,userAreaStore } from '@/stores'
	const idStore = userIdStore()
	const areaStore = userAreaStore()
	const tableRef = ref(null)
	const dialog = reactive({
		show: false,
		title: '',
		id: null
	})
	const assignDialog=reactive({
		show:false,
		clueId:null
	})
	const tableData = reactive({
		records: [],
		pages: 0,
		total: 0
	})
	const params = reactive({
		pageNo: 1,
		pageSize: 10,
		rId: areaStore.userArea
	})
	getTableData()
	function getTableData () {
		get(url.list, params, content => {
			tableData.records = content.records
			tableData.pages = content.pages
			tableData.total = content.total
			console.dir(tableData.records)
		})
	}
	function add() {
		dialog.title = '添加线索'
		dialog.id = null
	  dialog.show = true
	}
	function update(id) {
		dialog.title = '修改线索'
		dialog.id = id
		dialog.show = true
	}
	function adminList(clueId) {		
		assignDialog.clueId = clueId
		assignDialog.show = true
	}
	function del (id, valid) {
		const text = valid ? '确定要启用该线索吗?' : '确定要删除该线索吗'
		ElMessageBox.confirm(text, '警告', {
			type: 'warning'
		}).then(() => {
			post(url.del, { id, valid }, content => {
				getTableData()
			})
		}).catch(() => {})
	}
	const filterHandler = (value, row, column) => {
		const property = column.property
		return row[property] === value
	}
	const clearFilter = () => {
		tableRef.value.clearFilter()
	}
</script>

<style scoped lang="scss">
</style>